<template>
  <yt-page title="收发文详情" scroll>
    <yt-form :model="form" :rules="rules">
      <yt-card title="基本信息">
        <yt-cell label="发文部门">{{ currentData.sending_department }}</yt-cell>
        <yt-cell label="文号">{{ currentData.number }}</yt-cell>
        <yt-cell label="文件标题" border="none">{{ currentData.title }}</yt-cell>
      </yt-card>
      <yt-card title="附件">
        <yt-cell-open-file :title="file.name" :url="file.url" :key="index" v-for="(file, index) in currentData.file">
          {{ file.name }}
        </yt-cell-open-file>
        <p class="card-no-data" v-if="!currentData.file">暂无附件</p>
      </yt-card>
      <yt-card title="资料描述">
        <yt-textarea v-model="form.data_desc"></yt-textarea>
      </yt-card>
      <yt-card title="上报资料">
        <yt-file :uploadFile="uploadFile" v-model="form.data_files"></yt-file>
      </yt-card>
      <yt-btn slot="btn" v-if="record.state === 0" :loading="onSign" edge>签收</yt-btn>
      <yt-btn slot="btn" v-if="record.state === 1" :loading="onReport" edge validator>上报</yt-btn>
    </yt-form>
  </yt-page>
</template>

<script>
import { commonApi } from '@/common/api/commonApi.js'
import { ReplaceDictionary } from '@/common/utils/index.js'

export default {
  data() {
    return {
      currentData: {},
      form: {
        data_desc: '',
        data_files: []
      },
      rules: {
        data_desc: {
          type: 'string',
          required: true,
          message: '请填写资料描述'
        },
        data_files: {
          type: 'array',
          required: true,
          message: '请添加上报资料!'
        }
      },
      record: {},
      uploadFile: file =>
        commonApi
          .uploadFile(file)
          .then(({ _name, _url }) => ({ name: _name, url: _url }))
    }
  },
  async activated() {
    let p = [
      commonApi.dictionary('sending_department'),
      commonApi.searchById('WJ_send_files', this.$route.query.id),
      commonApi.searchById('WJ_send_files_record', this.$route.query.recordId)
    ]
    let [department, data, record] = await Promise.all(p)
    this.record = record
    data.data_files = data.data_files || []
    this.currentData = ReplaceDictionary(data, {
      sending_department: department
    })
  },
  methods: {
    async onSign(loaded) {
      try {
        await commonApi.save('WJ_send_files_record', {
          id: this.record.id,
          state: 1
        })
        this.record.state = 1
        this.$Toast('签收成功!', 'success')
      } catch (e) {
        this.$Toast('签收失败!', 'error')
      }
      loaded()
    },
    async onReport(loaded) {
      try {
        await commonApi.save('WJ_send_files_record', {
          id: this.record.id,
          state: 2,
          data_desc: this.form.data_desc,
          data_files: this.form.data_files
        })
        this.record.state = 2
        this.form = {
          data_desc: '',
          data_files: []
        }
        this.$Toast('上报成功!', 'success')
      } catch (e) {
        this.$Toast('上报失败!', 'error')
      }
      loaded()
    }
  }
}
</script>

<style scoped lang="stylus">
.title
  text-align center
  margin 15px
  font-weight bold
  font-size 18px

.desc
  font-size 14px
  color #666
  clear both

  span
    margin 10px

  .left
    float left

  .right
    float right

.content
  text-indent 10px
  font-size 14px
  padding 0 10px
  min-height 100px
  line-height 30px
  color #222

.card-no-data
  min-height 70px
  color #ddd
  font-size 14px
  line-height 50px
  text-align center

>>> .yt-textarea-title
  border none
</style>
